<!-- 城市选择器Bug修复测试页面 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">城市选择器Bug修复测试</text>
    </view>

    <!-- 问题描述 -->
    <view class="bg-red-50 border border-red-200 rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-red-900 mb-4">修复的问题</view>
      <view class="space-y-3 text-[24rpx] text-red-800">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-red-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">问题：选择城市后点击确定，会提示"已取消选择"</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-red-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">原因：确认后关闭弹窗触发了@close事件，导致发出cancel事件</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-green-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">解决：添加确认标志位，区分确认关闭和取消关闭</text>
        </view>
      </view>
    </view>

    <!-- 测试区域 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">修复验证测试</view>
      <view class="text-[24rpx] text-gray-500 mb-6">
        测试城市选择功能，验证确认选择后是否还会提示"已取消选择"
      </view>
      
      <CityPicker
        mode="city"
        placeholder="请选择省市（测试修复）"
        title="选择省市（Bug修复测试）"
        @confirm="handleRegionConfirm"
        @cancel="handleRegionCancel"
      />
      
      <!-- 显示选择结果 -->
      <view v-if="selectedRegion" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
        <view class="flex items-center mb-2">
          <IconFont name="check-circle" class="text-blue-600 mr-2" size="24rpx" />
          <text class="text-[24rpx] text-blue-600 font-medium">选择结果：</text>
        </view>
        <view class="text-[26rpx] text-blue-800">
          <text v-if="selectedRegion.province" class="block">
            省份：{{ selectedRegion.province.name }} ({{ selectedRegion.province.code }})
          </text>
          <text v-if="selectedRegion.city" class="block">
            城市：{{ selectedRegion.city.name }} ({{ selectedRegion.city.code }})
          </text>
        </view>
      </view>
    </view>

    <!-- 事件日志 -->
    <view v-if="eventLogs.length > 0" class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">事件日志</view>
      <view class="space-y-3">
        <view 
          v-for="(log, index) in eventLogs" 
          :key="index"
          class="flex items-center justify-between p-3 rounded-lg"
          :class="{
            'bg-green-50 border border-green-200': log.type === 'confirm',
            'bg-red-50 border border-red-200': log.type === 'cancel'
          }"
        >
          <view class="flex items-center">
            <IconFont 
              :name="log.type === 'confirm' ? 'check-circle' : 'close-circle'" 
              :class="log.type === 'confirm' ? 'text-green-600' : 'text-red-600'"
              size="24rpx"
              class="mr-3"
            />
            <text 
              class="text-[24rpx] font-medium"
              :class="log.type === 'confirm' ? 'text-green-800' : 'text-red-800'"
            >
              {{ log.type === 'confirm' ? '确认选择' : '取消选择' }}
            </text>
          </view>
          <text class="text-[22rpx] text-gray-500">{{ log.timestamp }}</text>
        </view>
      </view>
    </view>

    <!-- 测试说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">测试说明</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">选择省份和城市，然后点击"确认"按钮</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">修复后：应该只显示"已选择：xxx"的成功提示</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">点击弹窗右上角的"X"按钮或点击遮罩层取消</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            4
          </view>
          <text class="flex-1">取消操作：应该显示"已取消选择"的提示</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import CityPicker from './CityPicker.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

/**
 * 事件日志类型
 */
interface EventLog {
  type: 'confirm' | 'cancel'
  timestamp: string
  data?: any
}

// 响应式数据
const selectedRegion = ref<SelectionResult | null>(null)
const eventLogs = ref<EventLog[]>([])

/**
 * 添加事件日志
 */
const addEventLog = (type: 'confirm' | 'cancel', data?: any) => {
  eventLogs.value.unshift({
    type,
    timestamp: new Date().toLocaleTimeString(),
    data
  })
  
  // 只保留最近10条记录
  if (eventLogs.value.length > 10) {
    eventLogs.value = eventLogs.value.slice(0, 10)
  }
}

/**
 * 处理市区选择确认
 * @param result 选择结果
 */
const handleRegionConfirm = (result: SelectionResult) => {
  selectedRegion.value = result
  
  console.log('修复测试 - 确认选择:', result)
  
  // 添加确认事件日志
  addEventLog('confirm', result)
  
  // 显示选择结果提示
  let message = ''
  if (result.city) {
    message = `已选择：${result.province?.name} ${result.city.name}`
  } else if (result.province) {
    message = `已选择：${result.province.name}`
  }
  
  if (message) {
    Taro.showToast({
      title: message,
      icon: 'success',
      duration: 2000
    })
  }
}

/**
 * 处理市区选择取消
 */
const handleRegionCancel = () => {
  console.log('修复测试 - 取消选择')
  
  // 添加取消事件日志
  addEventLog('cancel')
  
  Taro.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  })
}
</script>
